<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>React Component</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/prismjs@1.6.0/themes/prism-tomorrow.css"/>
    <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      background: linear-gradient(to bottom, hsl(0, 0%, 100%) 400px, hsl(0, 0%, 95%) 500px);
      margin: 20px;
    }
    body > *:not(.nav) {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }
    pre {
      color: hsl(0, 0%, 90%);
      background: hsl(0, 0%, 10%);
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 0;
    }
    pre.render-js-code {
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
    }
    .render-js {
      background: white;
      border: 1px solid hsl(0, 0%, 10%);
      padding: 10px;
      border-bottom-right-radius: 6px;
      border-bottom-left-radius: 6px;
    }
    .render-js:after {
      clear: both;
    }
    h1 { text-transform: uppercase;}
    h1, h1 + p {
      text-align: center
    }
    h1 + p > img {
      box-shadow: 0px 2px 20px hsla(0, 0%, 0%, 0.25);
      border-radius: 50%;
    }
    code {
      font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
    }
    .nav {
      display: flex;
      justify-content: space-between;
      font-size: 80%;
      background: hsl(0, 0%, 10%);
      color: white;
      margin: -20px -20px 0px -20px;
      padding: 10px;
      text-transform: uppercase;
    }
    .nav a {
      text-decoration: none;
      color: inherit;
      transition: color 200ms ease;
      display: inline-block;
    }
    .nav a:hover {
      color: hsl(0, 0%, 80%);
    }
    .external-links a:not(:last-child) {
      padding: 0 5px;
    }
    h2 {
      text-transform: uppercase;
      border-bottom: solid 1px #ccc;
      padding-bottom: 5px;
      margin-top: 50px;
    }
    h2, h3, h4 {
      position: relative;
    }
    h3 {
      margin-top: 2em;
      font-size: 125%;
    }

    .header-anchor {
      position: absolute;
      left: -1em;
      color: #ccc;
      text-decoration: none;
      font-weight: normal;
      font-size: 80%;
    }
    </style>
  </head>
  <body>
    <nav class="nav">
      <div>
        <a href="https://github.com/ryanflorence">ryan florence</a> / <a href="https://github.com/ryanflorence/react-component-component">React Component Component</a>
      </div>
      <div class="external-links">
        <a href="https://workshop.me">Workshops</a>
        <a href="https://totalreact.com">Online Courses</a>
        <a href="https://twitter.com/ryanflorence">Twitter</a>
        <a href="https://github.com/ryanflorence/react-component-component">Github</a>
      </div>
    </nav>
